<!-- 封面组件 -->
<template>
	<page 
	:pageStyle="config.pageStyle" 
	:headerStyle="config.headerStyle" 
	:bodyStyle="config.bodyStyle" 
	:footerStyle="config.footerStyle">
		<div slot="pageHeader"><input class="pageHeader-title" :readonly="config.isDetail" v-model="title" @input="handleInput()"/></div>
		<div slot="pageContent">
			<div class="ContentTitle">
				<input v-model="ContentTitle" class="ContentTitle-title" :readonly="config.isDetail" @input="handleInput()" />
			</div>
			<div class="ContentList">
				<div class="ContentList-content"  v-for="(item,i) in config.content">
					<span class="ContentList-title">{{item.title}}:</span>
					<input class="ContentList-input" v-model="listValue[i]" :readonly="config.isDetail" @input="handleInput()"/>
				</div>

			</div>
		</div>
		<div slot="pageFooter">
			<input class="pageHeader-title" :readonly="config.isDetail" v-model="footerTitle" @input="handleInput()"/>
		</div>
	</page>
</template>

<script>
	import page from './page.vue'
	export default {
		name:"cover",
		components:{
			page
		},
		props:{
			config:{
				type:Object,
				default:{
					isDetail:false,
					pageStyle:{},
					headerStyle:{},
					bodyStyle:{},
					footerStyle:{}
				}
			}
		},
		created() {
			if(this.config){
				if(this.config.ContentTitle){
					this.title = this.config.HeaderTitle
					this.footerTitle=this.config.FooterTitle
					this.ContentTitle=this.config.ContentTitle
					for(var i in this.config.content){
						this.listValue[i]=this.config.content[i].value
					}
				}
			}

		},
		data(){
			return {
				title:"",
				ContentTitle:"",
				footerTitle:"",
				listValue:[]
			}
		},
		methods:{
			handleInput(){
				// console.log(this.ContentTitle,this.listValue,this.title)
				let Data = {
					title:this.title,
					contentTitle:this.ContentTitle,
					content:this.listValue,
					footerTitle:this.footerTitle
				}
				this.$emit("getData",Data)
			}
		}
	}
</script>

<style>
	input{
		border: none;
		outline: none;
	}
	.ContentTitle-title{
		width: 100%;
		font-weight: bolder;
		font-size: 30px;
		text-align: center;
	}
	.ContentTitle{
		/* text-align: center; */
		display: flex;
		align-items: center;
		height: 200px;
		width: 100%;
	}
	.ContentList{
		width: 90%;
		height: 562px; 
		margin: 25% auto;
		/* display: flex; */
		/* align-items: center; */
		/* flex-direction: column; */
	}
	.ContentList-content{
		margin-top: 20px;
		/* flex: 1; */
	}
	.ContentList-input{
		width: 26em;
	}
	.ContentList-title{
		min-width: 7em; 
		font-size: 18px;
		font-weight: bolder;
		text-align: right;
		margin-right: 10px;
		/* width: 50px; */
		display: block;
		float: left;
		/* margin-right: 3em; */
		/* display: inline-block; */
	}
</style>
